<template>
	<!-- <div class="login-wrapper">
		<div class="login-main">
			<h3 class="login-title">登录</h3>
			<el-form :model="user" :rules="rules" ref="userForm">
				<el-form-item prop="userName">
					<el-input v-model="user.userName" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" placeholder="密码" v-model="user.password"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button class="login-btn" type="primary" @click="login()">登录</el-button>
				</el-form-item>
				<router-link class="alink" to="/register">没有密码？注册</router-link>
			</el-form>
		</div>
	</div> -->
	<div class="out">
		<div class="login-box">
			<div id="owl" :class="owlClass">
				<div class="hand"></div>
				<div class="hand hand-r"></div>
				<div class="arms">
					<div class="arm"></div>
					<div class="arm arm-r"></div>
				</div>
			</div>
			<el-form :model="user" :rules="rules" ref="userForm" >
				<div class="input-box">
				<el-form-item prop="userName">
					<el-input v-model="user.userName" placeholder="用户名"></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input type="password" id="password" v-model="user.password" placeholder="密码" @blur="a" @focus="a">
					</el-input>
				</el-form-item>
				<el-button  @click="login()">登录</el-button>
				</div>
			</el-form>
			<br>
			<router-link class="alink" to="/register">没有账号？去注册</router-link>
		</div>
	</div>
</template>

<script>
import Storage from "@/utils/storage.js";
export default {
	name: "Login",
	data: function () {
		return {
			owlClass: ["owl"],
			user: {
				userName: "admin",
				password: "111111",
			},
			rules: {
				userName: [
					{
						required: true,
						message: "请输入用户名",
						trigger: ["blur", "change"],
					},
				],
				password: [
					{
						required: true,
						message: "请输入密码",
						trigger: ["blur", "change"],
					},
				],
			},
		};
	},
	methods: {
		a(event) {
			var isfocus = event.type === 'focus' ? true : false;
			console.log(isfocus);
			if (isfocus) {
				this.owlClass.push("password")
			}
			else {
				if (this.owlClass.length === 1) {
					return;
				}
				this.owlClass.pop();
			}
		},
		login: function () {

			this.$refs["userForm"].validate((valid) => {
				if (!valid) {
					this.$message.error("登录表单字段输入格式有误");
					return false;
				}
				debugger
				this.$Request
					.fetch_("/api/rentuser/login", "post", this.user)
					.then((result) => {
						console.log(result);
						if (result.status == this.$Request.OK_CODE) {
							// 登录成功，将用户信息放入 VuexStore
				
							this.$VuexStore.commit("setToken", result.data);
							//this.$Storage.setItemForLs("Token", result.data);
							//获取用户权限，是admin转跳到管理界面，是normal转跳到主页					
							if(Storage.getItemForLs(this.$TestData.TOKEN_OBJECT_KEY).role==="admin"){
								this.$router.push("/admin");
								}else {
									this.$router.push("/");
								}
						} else {
							this.$message.error(result.message);
							
							return false;
						}
					})
					.catch(() => {});
			});
		},
	},
};
</script>

<style scoped>
.out {
	margin-top: -60px;
	/* 100%窗口高度 */
	height: 100vh;
	/* 弹性布局 居中 */
	display: flex;
	justify-content: center;
	align-items: center;
	/* 渐变背景 */
	background: linear-gradient(200deg, #72afd3, #96fbc4);
}

.login-box {
	/* 相对定位 */
	position: relative;
	width: 320px;
}

.input-box {
	/* 弹性布局 垂直排列 */
	display: flex;
	flex-direction: column;
}

.input-box input {
	height: 40px;
	border-radius: 3px;
	/* 缩进15像素 */
	text-indent: 15px;
	outline: none;
	border: none;
	margin-bottom: 15px;
}

.input-box input:focus {
	outline: 1px solid lightseagreen;
}

.input-box button {
	border: none;
	height: 45px;
	background-color: lightseagreen;
	border-radius: 3px;
	color: #fff;
	cursor: pointer;
}

/* 猫头鹰样式 */
.owl {
	width: 211px;
	height: 108px;
	background-image: url("../../assets/owl1.jpg");
	/* 绝对定位 */
	position: absolute;
	top: -100px;
	/* 水平居中 */
	left: 50%;
	transform: translateX(-50%);
}

.owl .hand {
	width: 34px;
	height: 34px;
	border-radius: 40px;
	background-color: #472d20;
	/* 缩放0.6倍 */
	transform: scaleY(0.6);
	/* 动画过渡 */
	transition: 0.3s ease-out;
	position: absolute;
	left: 12px;
	bottom: -8px;
}

.owl .hand.hand-r {
	left: 170px;
}

.owl.password .hand {
	transform: translateX(42px) translateY(-15px) scale(0.7);
}

.owl.password .hand.hand-r {
	transform: translateX(-42px) translateY(-15px) scale(0.7);
}

.owl .arms {
	top: 58px;
	position: absolute;
	width: 100%;
	height: 41px;
	overflow: hidden;
}

.owl .arms .arm {
	width: 40px;
	height: 65px;
	position: absolute;
	left: 20px;
	top: 40px;
	background-image: url("../../assets/owl2.jpg");
	transform: rotate(-20deg);
	transition: 0.3s ease-out;
}

.owl .arms .arm.arm-r {
	transform: rotate(20deg) scaleX(-1);
	left: 158px;
}

.owl.password .arms .arm {
	transform: translateY(-40px) translateX(40px);
}

.owl.password .arms .arm.arm-r {
	transform: translateY(-40px) translateX(-40px) scaleX(-1);
}

/* 
.login-wrapper {
  height: 100%;
  background: #f7f7f7;
}
#canvas {
  width: 100%;
}
.login-main {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 320px;
  height: 370px;
  padding: 20px 35px;
  border: 1px solid #eee;
  margin: -185px 0 0 -160px;
}
.login-main::before,
.login-main::after {
  position: absolute;
  height: 12px;
  content: "";
}
.login-main::before {
  left: 4px;
  right: 4px;
  top: -12px;
  z-index: 2;
  background-color: #f5f5f5;
}
.login-main::after {
  left: 10px;
  right: 10px;
  top: -22px;
  z-index: 1;
  background-color: #f0f0f0;
}
.login-title {
  padding-bottom: 15px;
  border-bottom: 2px solid #459f75;
  margin: 15px 0 45px 0;
  color: #555;
  text-align: center;
  font-size: 30px;
}
.login-btn {
  width: 100%;
  height: 36px;
  margin-top: 30px;
  font-size: 16px;
}
.login-tip {
  color: #999;
  font-size: 12px;
  line-height: 30px;
}
.login-anim {
<<<<<<< HEAD
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
*/
</style>